<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="350"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style settings ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    
    // --- Drawing parameters ---
    const y_base = 250;
    const block_height = 100;
    const block_y_top = y_base - block_height;

    const block1_x_left = 100;
    const block2_x_right = 350;

    // Slanted interface points
    const slant_x_top = 200;
    const slant_y_top = block_y_top;
    const slant_x_bottom = 280;
    const slant_y_bottom = y_base;


    // --- 1. Draw Ground ---
    ctx.beginPath();
    ctx.moveTo(20, y_base);
    ctx.lineTo(450, y_base);
    ctx.stroke();

    // Hatching for the ground
    ctx.lineWidth = 1.5;
    for (let i = 25; i < 450; i += 20) {
        ctx.beginPath();
        ctx.moveTo(i, y_base);
        ctx.lineTo(i - 10, y_base + 10);
        ctx.stroke();
    }
    // Comma at the end of the line
    ctx.font = '24px Times New Roman';
    ctx.fillText(',', 450, y_base + 5);
    ctx.lineWidth = 2;

    // --- 2. Draw Blocks ---
    ctx.beginPath();
    // Block 1 (left)
    ctx.moveTo(block1_x_left, block_y_top);
    ctx.lineTo(slant_x_top, slant_y_top);
    ctx.lineTo(slant_x_bottom, slant_y_bottom);
    ctx.lineTo(block1_x_left, y_base);
    ctx.closePath();
    ctx.stroke();

    // Block 2 (right)
    ctx.beginPath();
    ctx.moveTo(slant_x_top, slant_y_top);
    ctx.lineTo(block2_x_right, block_y_top);
    ctx.lineTo(block2_x_right, y_base);
    ctx.lineTo(slant_x_bottom, slant_y_bottom);
    ctx.closePath();
    ctx.stroke();

    // --- 3. Draw Force F ---
    const force_y = y_base - block_height / 2;
    const force_x_start = 30;
    const force_x_end = block1_x_left;
    
    // Arrow line
    ctx.beginPath();
    ctx.moveTo(force_x_start, force_y);
    ctx.lineTo(force_x_end, force_y);
    ctx.stroke();
    
    // Arrowhead
    ctx.beginPath();
    ctx.moveTo(force_x_end, force_y);
    ctx.lineTo(force_x_end - 15, force_y - 7);
    ctx.moveTo(force_x_end, force_y);
    ctx.lineTo(force_x_end - 15, force_y + 7);
    ctx.stroke();
    
    // Label 'F'
    ctx.font = 'italic 24px Times New Roman';
    ctx.fillText('F', force_x_start - 5, force_y - 10);

    // --- 4. Draw Angle Arc ---
    const angle_center_x = slant_x_bottom;
    const angle_center_y = slant_y_bottom;
    const angle_radius = 25;
    
    // The angle is between the horizontal line (pointing left, angle PI) and the slanted line.
    const startAngle = Math.PI;
    // The slant line goes from (angle_center_x, angle_center_y) to (slant_x_top, slant_y_top)
    const endAngle = Math.atan2(slant_y_top - angle_center_y, slant_x_top - angle_center_x);
    
    ctx.beginPath();
    ctx.arc(angle_center_x, angle_center_y, angle_radius, startAngle, endAngle);
    ctx.stroke();

    // --- 5. Draw Labels ---
    // Block 1 labels
    ctx.font = '24px Times New Roman';
    ctx.fillText('1', 145, 185);
    ctx.font = 'italic 24px Times New Roman';
    ctx.fillText('m', 145, 215);
    ctx.font = 'italic 16px Times New Roman';
    ctx.fillText('1', 145 + 18, 220);

    // Block 2 labels
    ctx.font = '24px Times New Roman';
    ctx.fillText('2', 300, 185);
    ctx.font = 'italic 24px Times New Roman';
    ctx.fillText('m', 300, 215);
    ctx.font = 'italic 16px Times New Roman';
    ctx.fillText('2', 300 + 18, 220);

    // Bottom label "习题 1-26 图" (Exercise 1-26 Figure)
    ctx.font = '24px KaiTi'; // A font that supports Chinese characters
    ctx.textAlign = 'center';
    ctx.fillText('习题 1-26 图', canvas.width / 2, y_base + 60);

</script>

</body>
</html>